<template>
	<view class="container" v-if="loaded">
		<view class="box">
<!--			<view class="navbar">-->
<!--				<view-->
<!--					v-for="(item, index) in navList" :key="index"-->
<!--					class="nav-item"-->
<!--					:class="{current: tabCurrentIndex === index}"-->
<!--					@click="tabClick(index)"-->
<!--				>-->
<!--					{{item.text}}-->
<!--				</view>-->
<!--			</view>-->

			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入4位手机尾号" confirm-type="search" v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>
<!--					 <button class="cu-btn search-btn shadow-blur round" @click="add()">新增</button>-->

				</view>

			</view>
			<view class="flex bg-white tr" v-if="tabCurrentIndex==0">
				<!-- 被引荐人 稳岗日期 佣金 领取状态 -->
				<view class="flex4">代理人</view>
				<view class="flex4">手机号</view>
				<view class="flex4">管理员</view>
				<view class="flex4">下级人数</view>
<!--				<view class="flex4">操作</view>-->
			</view>
			<view class="flex tr" v-else>
				<!-- 入职公司 稳岗金 稳岗日期 领取状态 -->

				<view class="flex4">入职公司</view>
				<view class="flex4">稳岗金</view>
				<view class="flex4">稳岗日期</view>
				<view class="flex4">领取状态</view>
			</view>

		</view>

		<scroll-view class="list-scroll-content cu-list " scroll-y @scrolltolower="loadData" @scrolltoupper="loadData">

			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>

			<!-- 列表 -->

			 <view class="cu-item" v-for="(item,index) in worksList" :key="index"  >
				 <view class=" flex td" v-if="tabCurrentIndex==0" @click="edit(item)">
					 <view class="flex4">{{item.real_name}}</view>
					 <view class="flex4">{{item.mobile}}</view>
					 <view class="flex4">{{item.admin}}</view>
					 <view class="flex4">{{item.relation}}</view>
<!--					 <view class="flex4 cuIcon-edit"></view>-->
				 </view>
			 	<view class="flex td" v-else>
			 		<view class="flex4">{{item.company}}</view>
			 		<view class="flex4">{{item.money}}</view>
			 		<view class="flex4">{{item.stable_date}}</view>
			 		<view class="flex4">{{item.real_date!=undefined&&item.real_date>''?'已领取':item.should_date.substring(5,10)+'发放'}}</view>
			 	</view>


			 </view>
			 <!-- <view class="item " v-for="(item,index) in worksList" :key="index" v-else>


			 </view> -->
			<uni-load-more :status="loadingType"></uni-load-more>

      <view class="cu-modal" :class="modalName=='editModal'?'show':''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop>

          <view class="cu-list menu text-left solid-top" style="margin: 0;">
            <view class="cu-item">
              <view class="content">
                <view class="text-blue" style="justify-content: center;" v-if="fromData.id!=undefined&&fromData.id>0">编辑代理</view>
                <view class="text-blue" style="justify-content: center;" v-else>新增代理</view>
              </view>
            </view>
            <view class="cu-item">
              <view class="content">
                <view class="text-black">姓名：</view>
              </view>
              <view class="action">
                <input v-model="fromData.real_name" placeholder="请填写代理姓名" name="input" class="right"></input>
              </view>
            </view>
            <view class="cu-item ">
              <view class="content">
                <text class="text-black">手机号：</text>
              </view>
              <view class="action"><input v-model="fromData.mobile" placeholder="请填写代理手机号" name="input" class="right"></input></view>
            </view>
            <view class="cu-item ">
              <view class="content">
                <text class="text-black">微信号：</text>
              </view>
              <view class="action"><input v-model="fromData.weixin" placeholder="请填写微信" name="input" class="right"></input></view>
            </view>
            <view class="cu-item ">
              <view class="content">
                <text class="text-black">QQ号：</text>
              </view>
              <view class="action"><input v-model="fromData.qq" placeholder="请填写QQ" name="input" class="right"></input></view>
            </view>
            <view class="cu-item ">
              <view class="content">
                <text class="text-black">面试地址：</text>
              </view>
              <view class="action"><input v-model="fromData.address" placeholder="请填写面试地址" name="input" class="right"></input></view>
            </view>

            <view class="cu-item " >
              <view class="content">
                <view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;" @click="doEdit()">确认提交</view>
              </view>
            </view>
          </view>
        </view>
      </view>
		</scroll-view>

	</view>

</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from "@/components/empty";
import {
        mapState
    } from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				// navList: [{
				// 		state: 0,
				// 		text: '引荐入职收益',
				// 		value:1,
				// 		loadingType: 'more',
				// 		cateList: []
				// 	},
				// 	{
				// 		state: 1,
				// 		text: '入职稳岗收益',
				// 		value:2,
				// 		loadingType: 'more',
				// 		cateList: []
				// 	}
				// ],
				tabed:false,
				loaded:false,
				isMP:false,
				loadingType: 'more',
				userState:1,
				titleNViewBackground: '#FFF',
				area_id:'',
				wage_big:'',
        modalName:'',
        fromData:[],
				kwd:'',
				page:1,
				wage_small:'',
				position_type:'',
				work_type:'',
				typeState:{},
				userInfo:{},
				firstPage:'',
				worksList: [{}]
			};
		},
		computed: {
			// ...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.loaded=true;
			// this.getTableState();
			console.log('onload')
		},
		onShow() {
			let t = this;

      t.userInfo = uni.getStorageSync('userInfo');
			this.worksList=[];
			this.page=1;
			this.loadData();
		},
		methods: {
      edit(item){
        this.fromData = item
        this.modalName = 'editModal'
      },
      add(){
        this.fromData = []
        this.modalName = 'editModal'
      },
      hideModal(){
        this.modalName = ''
      },
      async doEdit(id){
        let t = this;
        if(t.statusIndex==0){
          uni.showToast({
            title:'请选择处理意见',
            icon:'none',
          })
          return
        }
        let param = {
          real_name:t.fromData.real_name,
          mobile:t.fromData.mobile,
          weixin:t.fromData.weixin,
          qq:t.fromData.qq,
          enable:'T',
          address:t.fromData.address,
        }
        if(t.fromData.id!=undefined&&t.fromData.id>0){
          param.id = t.fromData.id
          let data = await this.$http.post(
            'wx/updateAgent', //可以直接放链接(将不启用全局定义域名)
            param,
          );
        }
        else{
          let data = await this.$http.post(
            'wx/addAgent', //可以直接放链接(将不启用全局定义域名)
            param,
          );
        }
        t.hideModal()
        t.onSearch()
      },
			goPage(page){
				uni.navigateTo({
					url: page
				})
				return;

			},
			async getTableState(){
				let param = 'jobs';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/'+param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState',data);
				let obj = data.type

				console.log(data);
			},
			onSearch(){
				this.page = 1;
				this.worksList=[]
				this.loadData();
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let t = this

				t.loadingType = 'loading';
				let uId = uni.getStorageSync('userId');
				console.log(uId)
        let search = {
          order_by: 'created_at,desc',
          // input_id:t.userInfo.mobile,
        };
        console.log(JSON.stringify(search))
        if(t.$isHasRoleToAccess(['SuperAdmin'])){
          search.input_id = ''
        }
        let param = {
          search_data:JSON.stringify(search),
          page:t.page,
          per_page:20,
        };
        let data = await this.$http.get(
          'wx/agent', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        this.worksList=this.worksList.concat(data)
        this.page++;

        console.log(this.worksList)
        //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
        this.loaded = true;

        //判断是否还有数据， 有改为 more， 没有改为noMore
        this.loadingType = 'more';
        return
			},
			goDetail(id){
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-2/jobInfo?id=${id}`
					// url: `/pages/tabbar/tabbar-1/trainInfo`
				})
			},

			//顶部tab点击
			tabClick(index){

				this.tabCurrentIndex = index;
				console.log(index)

				this.typeId = this.navList[index].value;

				this.page=1;
				this.worksList=[];
				this.loadData('refush');
			},
			cateChange(e){
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.cateIds[index];

				console.log(cateId)
				this.cateId = cateId>0?cateId:0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			//更换tabbar
			changeTabbar(state){
				let tabList = Json.tabList;
				uni.setStorageSync('userState',state);

				let tabBar = tabList[state];
				console.log(tabBar)
				let index=0;
				tabBar.forEach(item=>{
					uni.setTabBarItem({
						index: index,
						text: item.text,
						iconPath: item.iconPath,
						pagePath:item.pagePath,
						selectedIconPath: item.selectedIconPath,
						success:(res)=> {
							console.log(res)
						},
						complete:(e)=> {
							console.log(e)
						},
					})
					index++;
				})
				uni.setStorageSync('tabState',0);

			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		background-color: #FFFFFF;
		height:100vh;
	}
	/* #endif */
	.cu-bar{
		min-height: 44px;
		.search-form{
			height:65rpx;
			// margin-right: 0;
		}
	}
	.container{

		padding-top: 45px;
		background-color: #FFF;
		.box{
			position: fixed !important;
			top:0px;
			width: 100%;
			box-shadow: 0 1px 5px rgba(0,0,0,.06);
		}
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}
	.cate-btn{
		background-color: #FFFFFF !important;
		width: 32px;
		color: #FFF;
		margin: 0 10px;
		image{
			width: 16px;
			height: 16px;
		}
	}
	.navbar{
		display: flex;
		height: 44px;
		padding: 0 5px;
		background: #fff;
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			text-align: center;
			border-left:0px;
			border-right:0px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: #4CA5FE;
			}
		}

	}
	.bg-grey123{
		border-radius: 20px;
	}
	.mb-sm123{
		display: flex;
	   border-bottom: 2px #5d9dd3 solid ;
	   border-top:0px;
	   border-left:0px;
	   border-right:0px;
	}
	.cu-btns{
		margin: 0px 8px ;
	}
	.cu-btnss{
		margin-right: -11px;
	}
	.boxbox{

	       padding: 0px 0px ;
		margin: 26px 10px ;
	}
	.margin-xs123{
	  	display: flex;
		margin:0;
	}
	.margin-lr{

	}

	.flex-wrap{
		color: #222 !important;
	}
	.person{
		.basis-xs{
			flex-basis: 50%;
			padding: 10px 0;
		}
	}
	.basis-xs{
		flex-basis: 50%;
		padding: 10px 0;
	}
	.basis-xs20{
		flex-basis: 20%;
	}
	.basis-row{
		flex-basis: 100%;
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		min-width: 80px;
	}
	.flex{
		margin: 0 15px;
		color: #BAC2D2;
		font-size: 12px;
	}
	.flex4{
		flex: 4;
	}
	.flex5{
		flex: 5;
	}
	.box{
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 990;
		width: 100%;
	}
	.tr{
		margin-top: 45px;
		padding: 5px 0;
		font-size: 14px;
		text-align: center;
		border-bottom: 1px solid #BAC2D2;
	}
	.td{
		padding: 5px 0;
		font-size: 14px;
		height:35px;
		text-align: center;
		border-bottom: 1px solid #BAC2D2;

	}

	.list-scroll-content{
		margin-top: 30px;
		height: 600px;
		.item{
			// heigth:150px !important;
		}
		.title{
			font-size:16px;
			color:#222222;
			font-weight: bold;
		}
		.reward{
			font-size:20px;
			color:#FF4400;
			font-weight: bold;
			top: 10px;
			right: 5px;
			text-align: right;
		}
		.detail{
			font-size:12px;
			color:#BAC2D2;
			height:50px;
		}
	}

	.top0{
		top: 0;
	}

	.m-t{
		margin-top: 16upx;
	}


	.position{
		color: #222;
		font-size: 16px;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}
	.item>.flex .subText{
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;

	}
	.portrait-box{
		position: absolute;
		right: 20px;
	}
	.portrait{
		width: 130upx;
		height: 130upx;
		border:5upx solid #fff;
		border-radius: 50%;
	}
	.flex{
		margin: 0 10px;
		color: #222;
	}

	.reward{
		color: #FF4400;
		font-size: 18px;
		position: relative;
	}
	.action-btn{
		height: 50px;
		padding: 5px 0;
	}

	.line{
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar{
		width: 50upx;
		height: 50upx;
	}
	.company{
		color: #BAC2D2;
		font-size:14px;
		line-height: 30px;
	}
	.height-14{
		line-height: 14px;
	}
	.action-box{
		text-align: right;
	}
	.join-btn{
		width: 90px;
		font-size: 14px;
		height: 30px;
		border-radius: 17px;
		position: absolute;
		padding: 10px 0px;
		margin: -10px 0px;
		right: 25px;
		background-color: #0181ff;
	}
	.font14{
		color: #BAC2D2;
		font-size: 14px;
		font-weight: normal;
	}


</style>
